<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">

    <el-table-column
      align="center"
      prop="r_id"
      label="预定编号"
      width="100">
    </el-table-column>

    <el-table-column
      align="center"
      prop="type"
      label="场馆类型"
      width="180">
    </el-table-column>

    <el-table-column
      align="center"
      prop="number"
      label="场馆信息"
      width="180">
    </el-table-column>

    <el-table-column
      align="center"
      prop="date"
      label="日期">
    </el-table-column>

    <el-table-column
      align="center"
      prop="time"
      label="时间">
    </el-table-column>

    <el-table-column
    align="center"
    prop="cancel"
    label="取消预约">
    <template slot-scope="scope">
      <el-button type="text" @click="cancel(scope.row)">取消预约</el-button>
    </template>
    </el-table-column>
  </el-table>
</template>
<script>
import {mapMutations, mapState} from "vuex"
import Common from "../../utils/Common.vue";
export default {
  data () {
    return {
      size: '',
      //显示框架整体样式
      tableData:[{
        r_id:'',
        type:'',
        number:'',
        date:'',
        time:'',
        cancel:''
      }],
      //get从后端获取的数据
      transData:{
        r_id:'',
        username:''
      }
    };
  },
  computed:{
    userName:{
        get(){
          return this.$store.state.username
        },
        set(val){
          this.$store.commit('username', val)
        }
    },
    // ...mapState(["username"])
  },
 //刷新页面
  mounted() {
  this.getInit();
  },
  methods:{
    ...mapMutations(['username']),
    getInit(){
      //从store中提取username
      this.transData.username=this.$store.state.username;
      console.log(this.transData.username);
      this.$axios({
        headers: {
                "token":this.$store.state.token,
                "username":this.$store.state.username,
              },
        method: "GET",
        url: Common.base_url + "/user/myreservations/"+ this.transData.username,
      })
        .then((res) => {
          console.log(res.data);
          console.log([res.data.data]);
          if(res.data.code==200){
            console.log("获取数据成功");
            this.tableData=res.data.data;
            // this.transData=res.data.data;
          }
          else if(res.data.code==500){
                this.$message({
                  message: res.data.message,
                  type: "error",
                })
              } 
          
        })
        .catch((error) => {
          console.log("数据获取失败");
        });
    },
    cancel(row){
      this.row=row;
      // console.log(transData);
      this.$confirm("是否取消预约?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(()=>{
        this.transData.username=this.row.username;
        this.transData.r_id=this.row.r_id;
        this.$axios({
          headers: {
                "token":this.$store.state.token,
                "username":this.$store.state.username,
              },
          method:"DELETE",
          url:Common.base_url + "/user/reservations/" + this.transData.username + "/"+this.transData.r_id,
        }).then((res) => {
          console.log(res.data);
          if(res.data.code=200){
            console.log("取消预订成功");
            this.$message({
              type: "success",
              message: "取消预订成功!",
            });
            this.getInit();
          }
          else if(res.data.code==500){
                this.$message({
                  message: res.data.message,
                  type: "error",
                })
              } 
        })
        
        
      }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }
  }
}
</script>
